<template>
    <!-- 单商品banner -->
    <view class="order-summary">
        <view class="summary-item">
            <view class="item-label">{{ $t('clerk.orderNum') }}：</view>
            <view class="summary-content">{{ orderitem.order_no }}</view>
            <view class="copy-btn" @click="copyText(orderitem.order_no)">{{
                $t('person.copy')
            }}</view>
        </view>
        <view class="summary-item">
            <view class="item-label">{{ $t('clerk.orderTime') }}：</view>
            <view>{{ orderitem.addtime }}</view>
        </view>
        <!-- <view class="hold-line"><view></view></view> -->

        <view class="summary-item" v-if="orderitem.is_pay == 1">
            <view class="item-label">{{ $t('order.methods') }}：</view>
            <view>{{ payTypeWord }}</view>
        </view>
        <!-- <view class="hold-line" v-if="orderitem.is_pay == 1">
      <view></view>
    </view> -->

        <view v-if="orderitem.order_type == 0" class="summary-item">
            <view class="item-label">{{ $t('order.expressMethos') }}：</view>
            <view>{{ orderitem.diy_express_name }}</view>
        </view>

        <!-- 商家留言 -->
        <view v-if="orderitem.words" class="summary-item">
            <view class="item-label" style="white-space: nowrap"
                >{{$t('clerk.message2')}}：</view
            >
            <view>{{ orderitem.words }}</view>
        </view>
        <!-- <view class="hold-line"><view></view></view> -->

        <view
            v-if="orderitem.order_type != 0"
            class="summary-item flex-x-sb"
            v-for="item in orderitem.book_info"
            :key="item.goods_id"
        >
            <view class="item-label"> {{ item.key }}： </view>
            <view class="item-label">
                {{ item.value }}
            </view>
        </view>

        <!-- <view v-if="orderitem.order_type != 0" class="summary-item flex-x-sb">
            <view class="item-label"> 预约时间： </view>
            <view v-if="orderitem.order_type == 2" class="item-label">
                {{ orderitem.book.date }}
            </view>
            <view v-else class="item-label">
                {{ orderitem.book.date }}
            </view>
        </view> -->

        <view class="summary-item flex-space-between">
            <view class="item-label">{{ $t('clerk.totalPrice') }}</view>
            <view>￥{{ orderitem.goods_total_price }}</view>
        </view>
        <!-- <view
            class="summary-item flex-space-between"
            v-if="orderitem.is_delivery != 1"
        >
            <view class="item-label">{{ $t('clerk.freight') }}</view>
            <view>+￥{{ orderitem.express_price }}</view>
        </view> -->
        <view
            class="summary-item flex-space-between"
            v-if="orderitem.is_delivery == 1"
        >
            <view class="item-label">{{$t('mdAdmin.money')}}</view>
            <view>+￥{{ orderitem.delivery_info.fee }}</view>
        </view>
        <!-- <view class="summary-item flex-space-between">
            <view class="item-label">{{ $t('order.discount') }}</view>
            <view>-￥{{ orderitem.coupon_sub_price }}</view>
        </view> -->
        <view class="total-price">
            <text>{{ $t('order.needPay') }}：</text>
            <text>￥<text style="font-size:36rpx">{{ orderitem.pay_price }}</text></text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: {
        orderitem: {
            type: Object,
            default: {},
        },
    },
    filters: {},
    computed: {
        //   0:微信，2:货到付款，3:余额，4:支付宝
        payTypeWord() {
            const Pay_Trans = {
                1: this.$t('common.payMethod1'),
                2: this.$t('common.payMethod2'),
                3: this.$t('common.payMethod3'),
                4: this.$t('common.payMethod4'),
            };
            return Pay_Trans[this.orderitem.pay_type] || null;
        },
    },
    methods: {
        copyText(data) {
            let that = this
            uni.setClipboardData({
                data: data,
                success: function () {
                    uni.showToast({
                        title: that.$t('common.copySuc'),
                        icon: "none",
                        duration: 2000,
                    });
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.order-summary {
    width: 100%;
    border-radius: 24rpx;
    background: #ffffff;
    padding: 40rpx 0;
    margin: 24rpx 0 295rpx 0;

    .summary-item {
        font-size: 26rpx;
        font-weight: 500;
        line-height: 44rpx;
        display: flex;
        align-items: center;
        color: #262626;
        margin-bottom: 34rpx;
        padding: 0 37rpx;

        .item-label {
            margin: 0 16rpx 0 37rpx;
            font-weight: 400;
        }
        >view:nth-child(2) {
          font-weight: 600;
        }

        .copy-btn {
            font-size: 22rpx;
            font-weight: 400;
            height: 34rpx;
            background: #f5f5f5;
            border-radius: 17rpx;
            padding: 0 13rpx;
            text-align: center;
            line-height: 34rpx;
            margin-left: 16rpx;
        }
    }

    .hold-line {
        margin-bottom: 40rpx;
        display: flex;
        justify-content: flex-end;
        view {
            width: 576rpx;
            height: 1rpx;
            background: #f2f2f2;
        }
    }

    .flex-space-between {
        justify-content: space-between;
    }

    .total-price {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 26rpx;
        font-weight: 400;
        color: #1a1a1a;
        padding: 0 37rpx;

        text:nth-child(2) {
            color: #f0250f;
            margin-left: 20rpx;
            font-weight: 600;
        }
    }
}
</style>
